<template>
  <div>
      <div class="users panel">
          <div class="inner">
              <h3>全国用户总量统计</h3>
              <div class="chart">
                  <div class="bar" ref="bar"></div>
                  <div class="data">
                      <div class="item">
                          <h4>120,899</h4>
                          <span>
                            <i class="icon-dot" style="background-color:#ed3f35"></i>
                            用户总量
                          </span>
                      </div>
                      <div class="item">
                          <h4>248</h4>
                          <span>
                            <i class="icon-dot" style="background-color:#eacf19"></i>
                            本月新增
                          </span>
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
export default {
    mounted(){
        let myChart = this.$echarts.init(this.$refs.bar)
        let item = {  // 占位项
            name : '',
            value: 1200,
            // 图形样式
            itemStyle:{
                color:'#254065', // 颜色
            },
            // 高亮样式
            emphasis:{
                // 高亮后柱子颜色
                itemStyle:{
                    color:'#254065'
                }
            },
            tooltip:{
                extraCssText:'opacity:0'  // 额外添加到浮层的样式  透明度
            }
        }
        myChart.setOption({
            color: new this.$echarts.graphic.LinearGradient(  // 颜色渐变
                // (x1,y2) 点到点 (x2,y2) 之间进行渐变
                0,
                0,
                0,
                1,
                [
                    {offset: 0, color: "#00fffb"}, // 0 起始颜色
                    {offset: 1, color: "#0061ce"} // 1 结束颜色
                ]
            ),
            tooltip: {
                trigger: "item"  // 触发类型
            },
            grid: {
                left: "4%",  // 网格距离left的距离
                right: "1%",  // 网格距离right的距离
                bottom: "3%",  // 网格距离bottom的距离
                top: "4%",  // 网格距离top的距离
                //  图表位置紧贴画布边缘是否显示刻度以及label文字 防止坐标轴标签溢出跟grid 区域有关系
                containLabel: true,
                // 是否显示直角坐标系网格
                show: true,
                //grid 四条边框的颜色
                borderColor: "rgba(0, 240, 255, 0.3)"
            },
            // x轴坐标数据
            xAxis: [
                {
                    type: "category",
                    data: [
                        "上海",
                        "广州",
                        "北京",
                        "深圳",
                        "合肥",
                        "",
                        "......",
                        "",
                        "杭州",
                        "厦门",
                        "济南",
                        "成都",
                        "重庆"
                    ],
                    axisTick: {
                        alignWithLabel: false,  // 刻度线和标签对齐
                        // 把x轴的刻度隐藏起来
                        show: false
                    },
                    // x轴标签配置
                    axisLabel: {
                        color: "#4c9bfd"  // 颜色
                    },
                    // x轴这条线的颜色样式
                    axisLine: {
                        lineStyle: {
                            color: "rgba(0, 240, 255, 0.3)"
                            // width: 3
                        }
                    }
                }
            ],
            yAxis: [
                {
                    type: "value",
                    axisTick: {
                        alignWithLabel: false,
                        // 把y轴的刻度隐藏起来
                        show: false
                    },
                    axisLabel: {
                        color: "#4c9bfd"
                    },
                    // y轴这条线的颜色样式
                    axisLine: {
                        lineStyle: {
                            color: "rgba(0, 240, 255, 0.3)"
                            // width: 3
                        }
                    },
                    // y轴分割线的颜色样式
                    splitLine: {
                        lineStyle: {
                            color: "rgba(0, 240, 255, 0.3)"
                        }
                    }
                }
            ],
            series: [
                {
                    name: "直接访问",
                    type: "bar",
                    barWidth: "60%", // 柱子宽度
                    data: [
                        2100,
                        1900,
                        1700,
                        1560,
                        1400,
                        item,
                        item,
                        item,
                        900,
                        750,
                        600,
                        480,
                        240
                    ]
                }
            ]
        })
    }
}
</script>

<style scoped>
    .inner h3{
        font-size: 0.3rem;
    }
    .users{
        height: 5.3rem;
        display: flex;
    }
    .users .inner .chart{
        display: flex;
        margin-top: 0.3rem;
        padding-top: 0.1rem;
    }
    .users .inner .chart .bar{
        width: 8.35rem !important;
        height: 4.0rem !important;
    }
    .users .data{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 2.4rem;
        padding: 0.45rem 0.375rem;
        box-sizing: border-box;
        background-image: url(../../assets/image/下载.png);
        background-size: cover;
        margin-left: 0.2rem;
    }
    .users h4{
        margin-bottom: 0.15rem;
        font-size: 0.4rem;
        font-weight: 400;
        color: #fff;
    }
    .users span{
        display: block;
        color: #4c9bfd;
        font-size: 0.2rem;
    }
    .icon-dot{
        display: inline-block;
        width: 5px;
        height: 11px;
        border-radius: 5px;
    }
</style>